<template>
  <div>
    <!--主运单-->
    <tablePage ref="inspectionTabMainOrder" :api="dutyGetMainOrder" :param="tabParam" :isStartLoad="true" sort-name="endStationTime" sort-type="desc">
      <template slot-scope="props">
        <Table :columns="mainOrderColumn" :data="props.data" @on-sort-change="props.sortChange" border @on-selection-change="mainOrderTabSelectChange"></Table>
      </template>
    </tablePage>
    <xlinkModal v-model="operatModal.viewDetailShow" title="查看详情" width="1200">
      <viewDetailMainOrderList v-if="operatModal.viewDetailShow" :currentMainOrder="mainOrderCurrentRow"></viewDetailMainOrderList>
    </xlinkModal>

  </div>
</template>

<script>
  import xlinkModal from '@components/modal/xlinkModal'
  import tablePage from '@components/table/tablePage.vue'
  import viewDetailMainOrderList from './viewDetailMainOrderList'
  import {dutyGetMainOrder} from '@api/backEnd/station'
  import moment from 'moment'

  export default {
    name: 'duty-opera-modal',
    data () {
      // 主运单
      let operatModal = {
        viewDetailShow: false
      }
      let mainOrderCurrentRow = {}
      let mainOrderColumn = [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '联运单号',
          key: 'orderNo',
          width: 200
        },
        {
          title: '对位时间',
          key: 'paraPositionTime',
          width: 200,
          render: (h, params) => {
            let thisdata = params.row.paraPositionTime
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: 250,
          render: (h, params) => {
            let viewDetailBtn = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.viewDetailAction(params.row)}>查看详情</i-button>)
            let btnArray = []
            btnArray.push(viewDetailBtn)
            return (btnArray)
          }
        }
      ]
      let checkedMainOrder = []
      let datas = {dutyGetMainOrder, mainOrderColumn, checkedMainOrder, operatModal, mainOrderCurrentRow}
      return datas
    },
    computed: {},
    props: {
      tabParam: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    methods: {
      mainOrderTabSelectChange (rows) {
        this.checkedMainOrder = rows
        this.$emit('getCheakMainOrder', rows)
      },
      mainOrderRefresh () {
        this.$refs['inspectionTabMainOrder'].dataRefresh()
        this.checkedMainOrder = []
      },
      viewDetailAction (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.viewDetailShow = true
      }
    },
    created () {
    },
    mounted () {
    },
    watch: {
      'tabParam': {
        handler: function (oldVal, newVal) {
          this.$refs['inspectionTabMainOrder'].dataRefresh()
        },
        deep: true
      }
    },
    components: {tablePage, xlinkModal, viewDetailMainOrderList}
  }
</script>

<style scoped>

</style>
